<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>simulations</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">

    <style type="text/css">

        #exam_title{
            margin-left: 280px;
            font-size: 50px;
            color: pink;

        }

        #exam_body{
            width: 800px;
            height: 1900px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
            margin-top: 100px;
        }

    </style>
</head>

<body>

    <input style="border: 0px none; width: 300px; color: #0C0C0C; float: right;" type="text" name="mss" id="mss" />
<!--    <input type="text" name="mss" id="mss" />-->
    <div id="exam_body">
        <form role="form" method="post">
            <div id="exam_title">
                <span>
                    模拟考试
                </span>
            </div>
            <h3>一、选择题（每题5分，答错不得分）</h3>
            <span th:each="obj : ${objs}">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span th:text="${objStat.count}">题号</span>、
                <label th:text="${obj.objQues}">问题描述</label>
                <div class="radio">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A、<label>
                        <input type="radio" th:name="objAns+${objStat.count}" value="A" th:text="${obj.objDescA}">
                    </label>
                </div>
                <div class="radio">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B、<label>
                        <input type="radio" th:name="objAns+${objStat.count}" value="B" th:text="${obj.objDescB}">
                    </label>
                </div>
                <div class="radio">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C、<label>
                        <input type="radio" th:name="objAns+${objStat.count}" value="C" th:text="${obj.objDescC}">
                    </label>
                </div>
                <div class="radio">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D、<label>
                        <input type="radio" th:name="objAns+${objStat.count}" value="D" th:text="${obj.objDescD}">
                    </label>
                </div>

                <input hidden th:id="ans+${objStat.count}" th:value="${obj.objAns}" />
            </span>

            <h3>二、简答题（每题15分，按点得分）</h3>
            <span th:each="sub : ${subs}">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span th:text="${subStat.count}">题号</span>、
                <label th:text="${sub.subDesc}">问题描述</label>
                <textarea class="form-control" th:id="subAns+${subStat.count}" th:name="subAns+${subStat.count}" style="margin-left: 70px; min-height: 100px;min-width: 200px;max-height: 800px; max-width: 700px;"></textarea>

                <input hidden th:id="ans+${subStat.count}" th:value="${sub.subAns}" />
            </span>
            <input type="submit" class="btn btn-success" value="立即提交" onclick="checkAns()" style="margin-left: 260px; margin-top: 40px"/>
        </form>
    </div>



    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var myAns = new Array();
        var corAns = new Array();
        window.onload = function() {

            daojishi();
        }

        var counttime = 60 * 90;//把90分钟化成总秒数

        function daojishi() {
            if (counttime >= 0) {
                var seconds = counttime % 60;//得到剩余的秒数   89%60==29秒
                var min = Math.floor(counttime / 60);//分钟
                if (min >= 60) {
                    var hour = Math.floor(min / 60);

                    min = Math.floor((counttime - hour * 60 * 60) / 60);

                    document.getElementById("mss").value = "距离考试结束还有" + hour + "小时" + min + "分"
                        + seconds + "秒";
                } else if (mis >= 1) {
                    document.getElementById("mss").value = min + "分" + seconds
                        + "秒数";
                } else {
                    document.getElementById("mss").value = seconds + "秒数";
                }

                counttime--;
                vartt = window.setTimeout("daojishi()", 1000);
            } else {
                window.clearTimeout(vartt);
                window.confirm("考试时间结束,请单击提交");
                tijiao();

            }
        }

        function tijiao() {
            document.forms[0].submit();
        }
        //-->

        function checkAns(){
            var count = 0;
            var myAns1 = $(':radio[name="objAns1"]:checked').val();
            var myAns2 = $(':radio[name="objAns2"]:checked').val();
            var myAns3 = $(':radio[name="objAns3"]:checked').val();
            var myAns4 = $(':radio[name="objAns4"]:checked').val();
            var myAns5 = $(':radio[name="objAns5"]:checked').val();
            var myAns6 = $(':radio[name="objAns6"]:checked').val();
            var myAns7 = $(':radio[name="objAns7"]:checked').val();
            var myAns8 = $(':radio[name="objAns8"]:checked').val();
            myAns.push(myAns1);
            myAns.push(myAns2);
            myAns.push(myAns3);
            myAns.push(myAns4);
            myAns.push(myAns5);
            myAns.push(myAns6);
            myAns.push(myAns7);
            myAns.push(myAns8);

            var cor1 = $("[id='ans1']").val();
            var cor2 = $("[id='ans2']").val();
            var cor3 = $("[id='ans3']").val();
            var cor4 = $("[id='ans4']").val();
            var cor5 = $("[id='ans5']").val();
            var cor6 = $("[id='ans6']").val();
            var cor7 = $("[id='ans7']").val();
            var cor8 = $("[id='ans8']").val();

            corAns.push(cor1);
            corAns.push(cor2);
            corAns.push(cor3);
            corAns.push(cor4);
            corAns.push(cor5);
            corAns.push(cor6);
            corAns.push(cor7);
            corAns.push(cor8);
            for(var i=0; i<myAns.length; i++){
                if (myAns[i] === corAns[i]){
                    count += 5;
                }
            }
            // document.write(count);
            alert("模拟考试得分为：" + count + "分。");
        }
    </script>
</body>
</html>